<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./restcss/restcss2011.css">
    <style>
        /* ctrl +f 查找
         Ctrl +h  替换 */
/* 设置外层容器 */
.nav{
    width: 100%;
}
/* 设置每一行的容器 */
.nav-inner{
    /* 设置弹性容器 */
    display: flex;
    /* 设置主轴上的空间 */
    justify-content: space-around;
}
.item{
 width: 18%;
    /* background-color: #bfa; */
    /* flex: auto; */
    text-align: center;
}
.item img{
    /* 设置图片宽度和父元素宽度一样 */
    width: 100%;
}
.item  a{
    color: #333;
    text-decoration: none;
    font-size: 16px;
    
}
    </style>
</head>

<body>
    <!-- 创建外层容器 -->
    <nav class="nav">
        <div class="nav-inner">
            <div class="item">
                <a href="#">
                    <img  src="./resourse/15img/sec1-3.jpg" alt="">
                    <span>天猫</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img  src="./resourse/15img/sec1-14.jpg" alt="">
                    <span>天猫</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img  src="./resourse/15img/sec1-5.jpg" alt="">
                    <span>天猫</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img  src="./resourse/15img/sec1-9.jpg" alt="">
                    <span>天猫</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img  src="./resourse/15img/sec1-5.jpg" alt="">
                    <span>天猫</span>
                </a>
            </div>
            
        </div>

        <div class="nav-inner">
            <div class="item">
                <a href="#">
                    <img src="./resourse/15img/sec1-9.jpg" alt="">
                    <span>淘宝</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img  src="./resourse/15img/sec1-5.jpg" alt="">
                    <span>淘宝</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img  src="./resourse/15img/sec1-14.jpg" alt="">
                    <span>淘宝</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="./resourse/15img/sec1-9.jpg" alt="">
                    <span>淘宝</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img  src="./resourse/15img/sec1-5.jpg" alt="">
                    <span>淘宝</span>
                </a>
            </div>
        </div>
       
    </nav>
</body>

</html>